<template>
	<a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible"
			  :maskClosable="false"
			  :bodyStyle="{ paddingBottom: '60px' }">


		<a-form-model ref="ruleForm" :model="form"
					  :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

			<a-form-model-item label="部门编码" prop="code" ref="code">
				<a-input :placeholder="placeholder.code" v-model="form.code" :disabled="isUpdate" />
			</a-form-model-item>
			<a-form-model-item  label="部门名称" prop="name" ref="name">
				<a-input :placeholder="placeholder.name" v-model="form.name" />
			</a-form-model-item>

			<a-form-model-item
					v-if="form.code !== 'root' "
					label="上级部门" prop="parentCode" ref="parentCode">
				<!--部门选择器 返回的值重新解构数据-->


				<DeptSelect
						:value="form.parentCode"
						@deptSelectResult="(e)=>{ form.parentCode=e }"
				/>

			</a-form-model-item>

			<a-form-model-item  label="显示排序" prop="sort" ref="sort">
				<a-input :placeholder="placeholder.sort" v-model.number="form.sort" />
			</a-form-model-item>


			<a-form-model-item  label="部门电话" prop="phone" ref="phone">
				<a-input :placeholder="placeholder.phone" v-model="form.phone" />
			</a-form-model-item>
			<a-form-model-item  label="备注" prop="remark" ref="remark">
		  <a-textarea  :placeholder="placeholder.remark" :rows="4" 
		    v-model="form.remark"
		   />
		 </a-form-model-item>

		</a-form-model>


		<!-- Modal 页脚 -->
		<footer class="drawer-footer"><a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button></footer>
	</a-drawer>
</template>
<script>
import {   deptAdd, deptUpdate } from '../public/http.js';
export default {
	props: ['editRecord'],
	components: {
		//部门ID选择器
		DeptSelect: resolve => {require(['../component/DeptSelector.vue'], resolve);}
	},
	data() {
		return {


			isUpdate: false, //是否是更新模式
			loading: false, //按钮Loading
			title: '新增部门',
			visible: true, //modal 显示状态
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 5
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 16
				}
			},
			placeholder: {
				code: '部门编码',
				name: '请设置部门名称',
				parentCode:"请选择上级部门",
				sort:"显示排序",
				remark: '部门备注'
			},
			form: {
				code: null,
				name: null,
				parentCode:null,
				sort:10,
				phone:null,
				remark: null
			},
			rules: {
				code: [
					{
						required: true,
						message: '请设置部门编码',
						trigger: 'blur'
					},
					{
						max: 10,
						message: '部门编码最多设置20个字符',
						trigger: 'blur'
					},
					{
						pattern: /^[a-zA-Z0-9_]+$/,
						message: '部门编码只允许使用数字或字母',
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: '请设置部门名称',
						trigger: 'blur'
					},
					{
						max: 10,
						message: '部门名称最多设置10个字符',
						trigger: 'blur'
					}
				],
					parentCode:[
						{
							required: true,
							message: '请选择上级部门',
							trigger: 'change'
						},

						//自定义方法一个
						{
							validator: (rule, value, callback) => {
								if (value === this.form.code) {
									callback(new Error('不能选择本部门为自己的上级部门!'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}




					],

				sort:{
					required: true,
					type: "number",
					message: '请设置部门在同级中的显示排序',
					trigger: 'blur'
				},
			remark:{
						required: false,
						max: 200,
						message: '备注信息请设置在200个字符以内',
						trigger: 'blur'
					}
			},
			sysRoleList: [], //当前系统拥有的权限列表
			treeData: [], //部门树
			replaceFields:{id:"code",pid:"parentCode",key:"code",value:"code",title:"name"}

		};
	},
	methods: {


		//表单提交事件
		onSubmit() {
			this.$refs.ruleForm.validate(valid => {
				//验证成功后进行数据提交
				if (valid) {
					this.loading = true;
					if (this.isUpdate) {
						deptUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
					} else {
						deptAdd(this.form).then(res => this.xhrMsg(res));
					}
				}
			});
		},
		//新增和删除返回相同的消息构造
		xhrMsg(res) {
			if (res.code === 0) {
				//成功提醒
				this.$notification.success({
					message: '操作成功',
					description: res.message
				});
				this.visible = false;
				this.$emit('closeFun', {
					render: true
				});
			} else {
				//错误提醒
				this.$notification.error({
					message: '操作失败',
					description: res.message
				});
			}
			this.loading = false;
		},
		//关闭弹窗
		handleCancel() {
		this.visible = false;
		this.$emit('closeFun', {
				render: false
			});},
		//表单初始化
		fromVal() {
			let obj = {...this.editRecord};
			this.form = obj;

			if (obj.id) {

				this.isUpdate = true;
				this.title = '编辑部门';
				delete this.form.children;
			}

		},
		//数据初始化
		async init() {

			this.fromVal();
		}
	},
	created() {
		this.init();
	}
};
</script>
 